<template>
    <div>
        <el-form ref="form" :model="newLists" label-width="auto">
            <br>
            <el-form-item label="笔记分类">
                <el-select v-model="newLists.name" placeholder="请选择一个分类~">
                    <el-option v-for="lists in studyList" 
                    :key="lists.id" 
                    :label="lists.name"
                    :value="lists.id">
                    </el-option>
                </el-select>
            </el-form-item>
        <el-form-item label="笔记标题">
            <el-input v-model="newLists.title"></el-input>
        </el-form-item>
        <el-form-item label="笔记内容">
            <el-input v-model="newLists.msg"></el-input>
        </el-form-item>
        <br>
        <el-form-item class="btn">
            <el-button type="primary" @click="addStudyList()">立即添加</el-button>
            &nbsp;&nbsp;
            <el-button>重置</el-button>
        </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import { mapState,mapMutations,mapActions,mapGetters } from 'vuex';
export default {
    name:'addStudy',
    methods: {
        ...mapActions('studyAbout',['addStudyList']),
        ...mapMutations('studyAbout',['SETNEWLIST'])
    },
    mounted() {
        this.$store.dispatch('studyAbout/studyList');
    },
    computed:{
        ...mapState('studyAbout',{
            studyList:(state)=>state.studyList
        }),
        ...mapGetters('studyAbout',['newList']),
        newLists:{
            get(){
                return this.newList
            },
            set(val){
                this.SETNEWLIST(val)
            }
        }
    },
}
</script>

<style scoped>
.el-input{
    width: 60%;
}
</style>